import { Button, Space } from "antd";
import React, { useContext } from "react";
import useDesignActions from "./useDesignActions";
import { copyAndAddItemById, moveItemDownById, moveItemUpById, removeItemById } from "../shared";
import { SchemaFieldContext } from "../core/SchemaField";
import { ArrowDownOutlined, ArrowUpOutlined, CopyOutlined, DeleteOutlined } from "@ant-design/icons";
const DesignToolbar = ({ disabledActions, item }: any) => {
  const { items } = useContext(SchemaFieldContext)
  const { copyMaterialToDesigner } = useDesignActions();
  return (
    <div className="design-toolbar">
      {disabledActions ? null : (
        <div className="design-toolbar-actions">
          <span onClick={()=>{
            moveItemUpById(items['properties']['x-component-props']['items'], item._id)
          }}>
            <ArrowUpOutlined />
          </span>
          <span onClick={()=>{
            moveItemDownById(items['properties']['x-component-props']['items'], item._id)
          }}>
            <ArrowDownOutlined />
          </span>
          <span onClick={() => {
            copyAndAddItemById(items['properties']['x-component-props']['items'], item._id)
          }}>
            <CopyOutlined />
          </span>
          <span onClick={() => {
            removeItemById(items['properties']['x-component-props']['items'], item._id)

          }}>
            <DeleteOutlined />
          </span>
          {/* <Button icon={<CopyOutlined />} onKeyDown={()=>{
            alert('sss')
          }} size="small">
          </Button>
          <Button icon={<DeleteOutlined />} onClick={()=>{
            removeItemById(items['properties']['x-component-props']['items'],item._id)
          }} size="small">
            
          </Button> */}
        </div>
      )}
    </div>
  );
};
export default DesignToolbar;
